<template>
    <div>
        <div class="login">
            <div class="login-box">
                <div class="logo">
                    影墨教育
                </div>
                <el-form>
                    <div class="input">
                        <div class="input-text">
                            用户名
                        </div>
                        <el-input v-model="user.user" placeholder="请输入用户名"></el-input>
                    </div>
                    <div class="input">
                        <div class="input-text">
                            <span>密码</span>
                        </div>
                        <el-input show-password @keydown.enter.native="login" v-model="user.pass" placeholder="请输入密码"
                            type="password"></el-input>
                    </div>
                    <el-button @click="login" style="width: 100%; border: 0; background-color: #08cfde; margin-top:20px ;"
                        type="primary">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '@/api/user.js'
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            user: {
                user: '',
                pass: ''
            }
        }
    },
    methods: {
        ...mapMutations(['savetoken']),

        async login() {
            if (this.user.pass && this.user.user) {
                login(this.user).then(res => {
                    if (res.data.msg) {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    } else {
                        this.$store.commit('savetoken', res.data.data.token);
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.$router.push('/index')
                    }

                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            } else {
                this.$message({
                    message: '请输入用户名和密码',
                    type: 'warning'
                });
            }
        },
    }
}
</script>
<style lang="less">
// body {
//     background: url(../../images/background.jpg);
//     width: 100%;
//     height: 100%;
// }
.login {
    width: 375px;
    height: 322px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 0 12px;
}

.login-box {
    padding: 40px 25px;
    width: 100%;
    height: 280px;
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 2%;

    .powers-check {
        display: flex;

        .powers {
            margin-left: 11px;
            margin-top: 3px;
            cursor: pointer;
        }
    }

    .logo {
        text-align: center;
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 40px;
    }

    .input {
        .input-text {
            margin-bottom: 10px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;

            span:first-child {
                font-weight: 700;
            }
        }

        margin-bottom: 10px;
    }

}

.login-text {
    width: 100%;
    text-align: center;
    color: #fff;

    span {
        cursor: pointer;
        color: #1ac75c;
    }

    span:hover {
        color: #40e62a;
        text-decoration: underline;
    }
}
</style>
